<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加密货币技术分析工具</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <!-- 自定义样式 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .card-shadow {
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            }
            .analysis-card {
                transition: transform 0.3s ease, box-shadow 0.3s ease;
            }
            .analysis-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-5xl">
        <!-- 页面标题 -->
        <header class="text-center mb-8">
            <h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-gray-800">
                <i class="fa fa-line-chart text-blue-600 mr-2"></i>加密货币技术分析工具
            </h1>
            <p class="text-gray-600 mt-2">快速分析BTC和ETH的市场趋势与关键指标</p>
        </header>

        <!-- 控制区域 -->
        <div class="bg-white rounded-lg p-4 mb-6 card-shadow">
            <div class="flex flex-wrap items-center justify-between gap-4">
                <div class="flex items-center">
                    <label for="analysis-period" class="text-gray-700 mr-2 font-medium">分析周期:</label>
                    <select id="analysis-period" class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="10m">10分钟</option>
                        <option value="30m">30分钟</option>
                        <option value="1h" selected>1小时</option>
                        <option value="4h">4小时</option>
                        <option value="1d">1天</option>
                    </select>
                </div>

                <button
                    onclick="startAnalysis()"
                    class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-300 flex items-center"
                >
                    <i class="fa fa-refresh mr-2"></i>开始分析
                </button>
            </div>

            <!-- 状态提示 -->
            <div id="status" class="mt-3 text-sm text-gray-500 hidden">
                <i class="fa fa-spinner fa-spin mr-1"></i>
                <span>正在获取数据并分析，请稍候...</span>
            </div>
        </div>

        <!-- 分析结果区域 -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- BTC分析卡片 -->
            <div id="btc-card" class="bg-white rounded-lg overflow-hidden card-shadow analysis-card">
                <div class="p-4 text-center text-gray-500">
                    <i class="fa fa-bitcoin text-3xl mb-2"></i>
                    <p>点击"开始分析"按钮获取BTC数据</p>
                </div>
            </div>

            <!-- ETH分析卡片 -->
            <div id="eth-card" class="bg-white rounded-lg overflow-hidden card-shadow analysis-card">
                <div class="p-4 text-center text-gray-500">
                    <i class="fa fa-ethereum text-3xl mb-2"></i>
                    <p>点击"开始分析"按钮获取ETH数据</p>
                </div>
            </div>
        </div>

        <!-- 页脚信息 -->
        <footer class="mt-10 text-center text-gray-500 text-sm">
            <p>数据仅供参考，不构成投资建议 | 技术指标基于历史数据计算</p>
        </footer>
    </div>

    <!-- 引入分析脚本 -->
    <script src="crypto-analyzer-simplified.js"></script>

    <!-- 简单的状态提示增强 -->
    <script>
        // 重写startAnalysis函数以添加状态提示
        const originalStartAnalysis = window.startAnalysis;
        window.startAnalysis = async function() {
            document.getElementById('status').classList.remove('hidden');
            try {
                await originalStartAnalysis();
            } finally {
                document.getElementById('status').classList.add('hidden');
            }
        };
    </script>
</body>
</html>
